import React, { useState } from 'react';

export default (props) => {
    const { property } = props;

    const [isVisible, setIsVisible] = useState(property.isVisible !== false);
    const [value, setValue] = useState(property.dataList || []);

    property.setIsVisible = (v) => { property.isVisible = v; setIsVisible(v); };
    property.setValue = (v) => setValue(v);

    if (!isVisible) return null;

    const { style } = property;

    return (
        <div className='divUserNameTable' style={style}>
            <table cellSpacing={0} cellPadding={0}>
                <tbody>
                    {value.map((m, i) => <tr key={i}>
                        {m.names.map((n, j) => <td key={j}><span>{n}</span></td>)}
                    </tr>)}
                </tbody>
            </table>
        </div>
    );
};